
html, body {
        /*overflow: hidden;*/
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
	}

h1,h2,h3,h4,h5,h6{
    font-family: 'Lato', sans-serif;
}

#renderCanvas {
    width: 100%;
    height: 500px;
    border: 1px solid #111;
    box-shadow: 1px 1px 20px rgba(1,1,1,.2);
    z-index: 10;
	touch-action: none;
}

.text-center{
    text-align: center;
}

.click{
	opacity:0.5;
    margin-top: -500px;
}

/*////////////////////BACKGROUND/////////////////////////////////*/
.divBtn{
    position: absolute;
    top: 23%;
}

.color{
    border: 2px solid #111;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 20px;
}

.color:hover{
    opacity:.8;
    cursor:pointer;
}

.white{
    background-color: #fff;
}

.gray{
    background-color: #7A7979;
}

.blue{
    background-color: #435573;
}
.taupe{
    background-color: #B6B3A5;
}
.beige{
    background-color: #F3F1E9;
}

/*////////////////////////////////MENU//////////////////////////////////////////*/


.btn{
	margin-top:10px;
}

/*//////MENU_TOP///////*/
.menuTop{
    margin-top: 2%;
    padding: 20px;
	-webkit-transition: top 1s;
	-moz-transition: top 1s;
	transition: top 1s;
}

/*/////////////////////////////////////*/
.all_btn{
	cursor:pointer;
	
}

.all_btn:hover{
	opacity:.8;
}


/*///////////////////////////////////Animation du bandeau /////////////////////////////////////////////*/
.text_ht{
	position:absolute;
	width:100%;
	height:200px;

}

.text_ht h2{
	font-size:65px;
	font-family: 'Lato', sans-serif;
	margin-top:90px;
	float:right;
	margin-right:5%;
}

.content {
    font-size: 35px;
    line-height: 40px;
    font-family: 'Lato', sans-serif;
    color: black;
    margin-top: 20px;
    overflow:hidden;
    text-align: center;
}

.visible {
    font-weight:600;
    overflow:hidden;
    height:40px;
    padding:0 40px;
    font-size: 20px;
}

p {
  display:inline;
  float:left;
  margin:0;
}

ul {

  margin-top:0;
  padding-left:130px;
  text-align:left;
  list-style:none;
  -webkit-animation-name: change;
  -webkit-animation-duration: 6s;
  -webkit-animation-iteration-count: infinite;
  animation-name: change;
  animation-duration: 6s;
  animation-iteration-count: infinite;
}

ul li {
  line-height:40px;
  margin:0;
}

@-webkit-keyframes opacity {
  0%, 100% {opacity:0;}
  50% {opacity:1;}
}

@-webkit-keyframes change {
  0%, 12%, 100% {transform:translateY(0);}
  17%,29% {transform:translateY(-25%);}
  34%,46% {transform:translateY(-50%);}
  51%,63% {transform:translateY(-75%);}
  68%,80% {transform:translateY(-50%);}
  85%,97% {transform:translateY(-25%);}
}

@keyframes opacity {
  0%, 100% {opacity:0;}
  50% {opacity:1;}
}

@keyframes change {
  0%, 12%, 100% {transform:translateY(0);}
  17%,29% {transform:translateY(-25%);}
  34%,46% {transform:translateY(-50%);}
  51%,63% {transform:translateY(-75%);}
  68%,80% {transform:translateY(-50%);}
  85%,97% {transform:translateY(-25%);}
}



@media (max-width: 480px) {
  .content {
    display: none;
  }
}

@media 
  (max-width:1024px) 
  and (orientation: landscape) {
  .menuTop {
    margin-top: -30px;
  }
}

@media 
  (max-width:640px) {
  .divBtn {
    top: 40%;
      
  }
  .color{
      width: 20px;
      height: 20px;
      margin-left: -25px;
  }
}



